import util from "@/utils/util";
import { transformEmtyValue } from "@/utils/eam";
//线的颜色
export const colors = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#00CC5E", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#00E898", // 100% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#FF6A23", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FFA432", // 100% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#b071f1", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#b071f1", // 100% 处的颜色
      },
    ],
  },
];

export function getOption() {
  return {
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: (params) => {
        return `${params[0].name}<br />
        ${params[0].seriesName}: ${transformEmtyValue(
          params[0].value,
          "-"
        )}%<br />
        标准效率: ${transformEmtyValue(
          params[0].data.mechanEfficiencyCoef,
          "-"
        )}%<br />
        ${params[1].seriesName}: ${transformEmtyValue(params[1].value, "-")}%
      `;
      },
    },
    legend: {
      data: [
        "生产效率",
        "产线故障率",
        { name: "故障率标准", icon: "path://M128 480h768v64H128z" },
      ],
      top: 8,
      left: 20,
    },
    grid: {
      left: util.pxToFixPx(60),
      right: util.pxToFixPx(80),
      bottom: util.pxToFixPx(40),
      // containLabel: true,
    },
    // dataZoom: [
    //   {
    //     type: "inside",
    //     startValue: 0,
    //     endValue: 30,
    //   },
    //   {
    //     type: "slider",
    //     startValue: 0,
    //     endValue: 30,
    //     bottom: "4%",
    //     top: "92%",
    //     showDetail: false,
    //     dataBackground: {
    //       lineStyle: {
    //         opacity: 0,
    //       },
    //       areaStyle: {
    //         opacity: 0,
    //       },
    //     },
    //   },
    // ],
    xAxis: {
      type: "category",
      triggerEvent: true,
      data: [],
      axisLine: {
        lineStyle: {
          color: "#C8D0D7",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#7D8292",
        fontSize: util.pxToFixPx(13),
        // rich: {
        //   active: {
        //     color: xAxisLabelActiveColor,
        //     fontWeight: "600",
        //   },
        // },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "",
      minInterval: 10,
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#C8D0D7"],
          type: "dotted",
          opacity: 0.8,
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#7D8292",
        hideOverlap: true,
        formatter(value) {
          return `${value}%`;
        },
      },
      axisTick: {
        show: false,
      },
      splitNumber: 5,
      min: 0,
      max: function (value) {
        return value.max == -Infinity || value.max < 100 ? 100 : value.max;
      },
    },
    series: [
      {
        name: "生产效率",
        type: "line",
        symbol: "emptyCircle",
        symbolSize: util.pxToFixPx(9),
        connectNulls: true,
        lineStyle: {
          width: 2,
          shadowBlur: 6,
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowOffsetX: 4,
          shadowOffsetY: 8,
        },
        label: {
          show: true,
          position: "top",
          color: "#5b5e68",
          formatter: "{c}%",
        },
        data: [],
        markPoint: {
          symbol: "circle",
          symbolSize: 1,
          itemStyle: {
            color: "rgba(0,0,0,0)",
          },
          label: {
            position: "right",
            offset: [10, 0],
            color: colors[0].colorStops[1].color,
          },
          data: [],
        },
        markArea: {
          itemStyle: {
            color: "#13ce66",
            opacity: 0.1
          },
        },
      },
      {
        name: "产线故障率",
        type: "line",
        symbol: "emptyCircle",
        symbolSize: util.pxToFixPx(9),
        connectNulls: true,
        lineStyle: {
          width: 2,
          shadowBlur: 6,
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowOffsetX: 4,
          shadowOffsetY: 8,
        },
        label: {
          show: true,
          position: "top",
          color: "#5b5e68",
          formatter: "{c}%",
        },
        data: [],
        markPoint: {
          symbol: "circle",
          symbolSize: 1,
          itemStyle: {
            color: "rgba(0,0,0,0)",
          },
          label: {
            position: "right",
            offset: [10, 0],
            color: colors[1].colorStops[1].color,
          },
          data: [],
        },
      },
      {
        name: "故障率标准",
        type: "line",
        symbolSize: 0,
        connectNulls: true,
        lineStyle: {
          width: 1,
        },
        label: {
          show: false,
        },
        data: [],
        markPoint: {
          symbol: "circle",
          symbolSize: 1,
          itemStyle: {
            color: "rgba(0,0,0,0)",
          },
          label: {
            position: "right",
            offset: [0, 0],
            color: colors[2].colorStops[1].color,
          },
          data: [],
        },
      },
    ],
  };
}
